<script lang="ts" setup>
import XInput from './XInput.vue'

defineProps<{
    modelValue: string
    placeholder?: string
}>()

defineEmits<{
    (e: 'update:modelValue', value: string): void
}>()

const psState = $ref(true)
</script>

<template>
    <XInput :password="psState" :model-value="modelValue" :placeholder="placeholder ?? '请输入密码'" padding-right="14%"
            @update:model-value="$emit('update:modelValue', $event)">
        <view class="center h-full mr-3.75" @click="psState = !psState">
            <!-- 用:src不能动态读取 -->
            <image v-show="!psState" src="/static/images/icons/common/password_show.svg" w-39 h-30/>
            <image v-show="psState" src="/static/images/icons/common/password_hide.svg" w-39 h-30/>
        </view>
    </XInput>
</template>

<style lang="scss" scoped></style>
